<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>综合分析</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" th:href="@{/resources/favicon.ico}">
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all"/>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="width: 1700px;height:690px;margin-top: 20px">
</div>

<script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/resources/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/resources/jquery-3.1.1.min.js}"></script>
<script type="text/javascript">
    layui.use(['jquery','table','layer'],function(){
        var $=layui.jquery;
    });
    $.get("/customer/loadOther", function (data) {
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var colors = ['#5470C6', '#91CC75', '#EE6666'];
        option = null;
        option = {
            color: colors,

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['客户数量', '站点数量', '总计']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data.address,
                    axisLabel: {
                        interval: 0,
                        rotate: 60,
                        margin: 10
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '客户数量',
                    min: 0,
                    max: 100,
                    position: 'right',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 个'
                    }
                },
                {
                    type: 'value',
                    name: '站点数量',
                    min: 0,
                    max: 150,
                    position: 'right',
                    offset: 80,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 个'
                    }
                },
                {
                    type: 'value',
                    name: '总计',
                    min: 0,
                    max: 200,
                    position: 'left',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 个'
                    }
                }
            ],
            series: [
                {
                    name: '客户数量',
                    type: 'bar',
                    data: data.customer
                },
                {
                    name: '站点数量',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: data.site
                },
                {
                    name: '总计',
                    type: 'line',
                    yAxisIndex: 2,
                    data: data.sum
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    })
</script>
</body>
</html>
